<template>
	<view class="moxi_c_diy_line">
	    <template v-if="set.type=='none'">
	        <view :style="'width: 100%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'"></view>
	    </template>
	    <template v-else>
	        <view :style="'width: 30%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-if="set.type=='left'"></view>
	        <view :style="'width: 70%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-else-if="set.type=='right'"></view>
	        <view :style="'width: 100%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-else></view>
	        <view :style="'flex: 1 0 auto;width: 6px;height: 6px;margin: 0 10px;border-radius:100%;background: '+set.color" v-if="set.type=='dot'"></view>
	        <h4 :style="'flex: 1 0 auto;margin: 0 10px;color: '+set.color" v-else>{{set.title}}</h4>
	        <view :style="'width: 70%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-if="set.type=='left'"></view>
	        <view :style="'width: 30%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-else-if="set.type=='right'"></view>
	        <view :style="'width: 100%;height: 1px;border-bottom: 1px '+set.borderStyle+' '+colorToRgba()+';'" v-else></view>
	    </template>
	</view>
</template>

<script>
	export default {
		name:"diy-line",
		data() {
			return {
				
			};
		},
		props:{
			 set:{
				type:Object,
			 	default(){
					return {
					  type:"none",//left、center、right、dot、none
					title:"文字内容",
					color:'#e23e3e',
					borderStyle:"solid"
					}
				}
			 }
		},methods:{
			colorToRgba(){
				return uni.$u.rgbToHex(this.set.color,0.2)
			}
		}
	}
</script>

<style>
.moxi_c_diy_line{display: flex;flex-direction: row;justify-content: flex-start;align-items:center}
.moxi_c_diy_line h4{font-size: 14px;;}
</style>